<template>
    <div>
        <div :style="{height:fheight+'px',width:fwidth+'px',background:fbackground}">
            <div :style="{height:'100%',width:speedSize+'%',background:background}"></div> 
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            speedSize:0,
        }
    },
    props: {
        fheight:{ //高度
            type:Number,
            default:6
        },
        fwidth:{ //总长度
            type:Number,
            default:140,
        },
        fbackground:{ //底色
            type:String,
            default:'#fff'
        },
        width:{ //进度条终止位置,即当前长度比上总长度
            type:Number,
            default:50,
        },
        background:{ //进度条颜色
            type:String,
            default:'#00cd7a',
        },
        speed:{ //进度条显示速度
            type:Number,
            default:30,
        },
        stop:{
            type:Boolean,
            default:true
        }
    },
    mounted () {
        this.onspeed();
    },
    methods: {
        onspeed(){
            let self = this;
            var timer = window.setInterval(() => {
                self.speedSize ++;
                if(self.speedSize == self.width || this.stop == false){
                    clearInterval(timer);
                }
                this.$emit('getspeedSize',self.speedSize)
            }, self.speed)
        }
    }
}
</script>
<style lang="less" scoped>

</style>


